<template>
  <div>
    <div v-if="isShow===1" class="main_box">
      <div class="topBackgroundImgBox">
        <img :src="configImgObj.firstimg" alt="图片丢失" />
      </div>
      <div class="getItNowFromBox">
        <img :src="imgListObj.getItNowFromImg" alt="图片丢失" />
        <ul class="getItNowFromMain">
          <li class="getItNowFromMain_imgBox">
            <div class="getItNowFromMain_imgItem" v-for="(item,index) in goodsList" :key="index">
              <img :src="item.url" alt="图片丢失" />
            </div>
          </li>
          <li class="getItNowFromMain_radioBox">
            <!-- <span  v-for="(item,index) in goodsList" :key="index">
              <input name="color" type="radio" :value="item._id" v-model="formData.goodsId" />
              
            </span>-->
            <el-radio-group v-model="formData.goodsId">
              <el-radio
                class="inputRadio"
                v-for="(item,index) in goodsList"
                :key="index"
                :label="item._id"
              >
                <span :style="{color: item.color}">{{item.name}}</span>
              </el-radio>
            </el-radio-group>
          </li>
          <li class="getItNowFromMain_textBox">
            <span class="getItNowFromMain_label">姓名：</span>
            <input class="getItNowFromMain_Input" placeholder="请输入姓名" type="text" v-model="formData.name" />
          </li>
          <li class="getItNowFromMain_textBox">
            <span class="getItNowFromMain_label">电话：</span>
            <input class="getItNowFromMain_Input" placeholder="请输入电话" type="number" v-model="formData.phone" />
          </li>
          <li class="getItNowFromMain_textBox" @click="selectAddress">
            <span class="getItNowFromMain_label">地址：</span>
            <input class="getItNowFromMain_Input" placeholder="请选择省市区" disabled type="text" v-model="formData.address" />
          </li>
          <li class="getItNowFromMain_textBox">
            <span class="getItNowFromMain_label"></span>
            <input class="getItNowFromMain_Input" placeholder="请输入详细地址" type="text" v-model="formData.address2" />
          </li>
          <li class="getItNowFromMain_btnBox">
            <div class="getItNowFromMain_btn" @click="confirmReceiptFn()">确认领取</div>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="isShow===2" class="introduceBox">
      <div class="setMealBox">
        <img :src="configImgObj.headerimg" alt="图片丢失" />
        <div class="setmealMain">
          <!-- <ul class="setmealTableBox">
            <li class="setmealTableBox_title">普通电话卡套餐</li>
            <li class="setmealTableBox_li">
              <span class="setmealTableBox_left">联通：300分钟+500MB</span>
              <span class="setmealTableBox_right">月租30元</span>
            </li>
            <li class="setmealTableBox_li">
              <span class="setmealTableBox_left">电信：100分钟+500MB</span>
              <span class="setmealTableBox_right">月租39元</span>
            </li>
          </ul> -->
          <div class="getThePackageBox">
            <h1 class="getThePackageBox_title">中国移动儿童手表专享套餐</h1>
            <ul class="getThePackageBox_content">
              <li class="getThePackageBox_item" v-for="(item,index) in setMealList" :key="index">
                <img :src="imgListObj.ddgoo_item" alt="图片丢失" />
                <div class="getThePackageBox_itemBox">
                  <h4 class="getThePackageBox_itemTitle">{{item.name}}</h4>
                  <div class="getThePackageBox_itemContent">
                    <div class="getThePackageBox_itemContent_left">
                      <p class="getThePackageBox_itemContent_details">{{item.content}}</p>
                      <p class="getThePackageBox_itemContent_priceBox">
                        <span class="getThePackageBox_itemContent_price_month">
                          低至
                          <i class="getThePackageBox_itemContent_price">{{item.month}}</i>元/月
                        </span>
                        <span class="getThePackageBox_itemContent_price_total">￥{{item.price}}</span>
                      </p>
                    </div>
                    <div class="getThePackageBox_itemContent_BtnBox">
                      <div
                        class="getThePackageBox_itemContent_Btn"
                        @click="paymentFn(item._id,item.name,item.price)"
                      >领取电话卡</div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <h3 class="setmealRemarks">*激活套餐，手表即可一年包换，终身保修</h3>
        </div>
      </div>
      <div class="introduceBox_title">
        <img :src="imgListObj.introduceBox_titleImg" alt="图片丢失" />
      </div>
      <div class="introduceBox_content">
        <img :src="imgListObj.introduceImg1"/>
        <img :src="imgListObj.introduceImg2"/>
        <img :src="imgListObj.introduceImg3"/>
        <img :src="imgListObj.introduceImg4"/>
        <img :src="imgListObj.introduceImg5"/>
        <img :src="imgListObj.introduceImg6"/>
        <img :src="imgListObj.introduceImg7"/>
        <img :src="imgListObj.introduceImg8"/>
        <img :src="imgListObj.introduceImg9"/>
        <img :src="imgListObj.introduceImg10"/>
      </div>
      <div class="QRcodeBox" v-show="isShowQRcode">
        <div class="QRcodeMain">
          <div id="QRcodecanvas"></div>
          <div class="QRcodeTitle">扫码支付</div>
        </div>
      </div>
    </div>
    <div v-if="isShow===3" class="successPage">
      <img :src="imgListObj.lastPage" alt="图片丢失" />
      <div class="successPage_forwardBtn social-share" @click="forwardFn()"></div>
      <div class="successPage_qucodeBox">
        <img :src="configImgObj.qrcode" alt="二维码丢失" />
      </div>
    </div>
    <van-popup v-model="selectAddressShow" position="bottom">
      <van-area title="请选择省市区" @confirm="getAddress" @cancel="selectAddress" :area-list="areaList" />
    </van-popup>
    <div class="mask" v-if="showMask" @click="showMask = false"></div>
  </div>
</template>
<script>
import backgroundImg from "../assets/images/topbackground.jpg";
import getItNowFromImg from "../assets/images/ddgoo_002.png";
import setMealBoxImg from "../assets/images/one.png";
import introduceBox_titleImg from "../assets/images/button.png";
import introduceImg1 from "../assets/images/abc1.jpg";
import introduceImg2 from "../assets/images/abc2.jpg";
import introduceImg3 from "../assets/images/abc3.jpg";
import introduceImg4 from "../assets/images/abc4.jpg";
import introduceImg5 from "../assets/images/abc5.jpg";
import introduceImg6 from "../assets/images/abc6.jpg";
import introduceImg7 from "../assets/images/abc7.jpg";
import introduceImg8 from "../assets/images/abc8.jpg";
import introduceImg9 from "../assets/images/abc9.jpg";
import introduceImg10 from "../assets/images/abc10.jpg";
import lastPage from "../assets/images/ddgoo_08.jpg";
import ddgoo_item from "../assets/images/ddgoo_item.png";
import areaList from '../assets/js/area';
import {
  submitgoodsApi,
  getSetMealListApi,
  getBackgroundImgApi,
  submitPaymentApi,
  getDataListApi,
  getOpenid,
  getCode,
  paySuccess,
  payByMWEB,
  findOrderById,
  getShareConfig
} from "../axios/api.js";

const share = {
  title: '中国移动免费领取儿童电话手表',
  desc: '中国移动推出预存话费免费领取智能儿童电话手表活动，安全守护儿童快乐成长。',
  imgUrl: 'http://mall.szddgoo.com/logo.png',
  link: 'http://mall.szddgoo.com' + '?channelid=' + getQueryString().channelid 
}
function getQueryString() {
  const url = location.search;
  const rs = {};
  if (url.indexOf("?") === 0) {
    const querystring = url.substr(1);
    const kvArr = querystring.split("&");
    kvArr.forEach(item => {
      const temp = item.split("=");
      const key = temp[0];
      const val = temp[1];
      rs[key] = val;
    });
  }
  return rs;
}
import QRCode from "qrcodejs2";
import nativeshare from "nativeshare";
import wx from "weixin-js-sdk";
import { getWxConfig } from '../axios/wx'
let nativeShare
export default {
  name: "HelloWorld",
  data() {
    return {
      showMask: false,
      selectAddressShow: false,
      areaList: areaList,
      imgListObj: {
        top: backgroundImg,
        getItNowFromImg,
        setMealBoxImg,
        introduceBox_titleImg,
        introduceImg1,
        introduceImg2,
        introduceImg3,
        introduceImg4,
        introduceImg5,
        introduceImg6,
        introduceImg7,
        introduceImg8,
        introduceImg9,
        introduceImg10,
        ddgoo_item,
        lastPage
      },
      isShow: 1,
      goodsList: [],
      setMealList: [],
      isShowQRcode: false,
      formData: {
        name: "",
        phone: "",
        address: "",
        goodsId: ""
      },
      settlementId: null,
      configImgObj: {
        firstimg: "",
        qrcode: ""
      },
      channelid: ''
    };
  },
  props: {},
  created() {
    
    getDataListApi();
    // getOpenid()
    if (this.isWx()) {
      // getWxConfig()
      this.getShareConfig()
      let openid = localStorage.getItem('openid')
      if (openid) {
        this.openid = openid;
      } else {
        getCode().then(res => {
          const querystring = getQueryString();
          let code = querystring.code;
          if (!code) {
            location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
              res.result.appid
            }&redirect_uri=${encodeURI(
              `http://mall.szddgoo.com?channelid=${querystring.channelid || ""}`
            )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
          } else {
            getOpenid({ code: code }).then(res => {
              console.log("res", res);
              this.openid = res.openid;
              localStorage.setItem('openid', res.openid)
            });
          }
        });
      }
    } else {
      nativeShare = new nativeshare()
      var shareData = {
          title: share.title,
          desc: share.desc,
          // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
          link: location.href,
          icon: share.imgUrl,
      }
      nativeShare.setShareData(shareData)
    }

    this.getBackgroundImgFn();
    // 一进页面获取免费领取参数
    getDataListApi().then(res => {
      this.goodsList = res.result;
    });
    // 获取渠道id
    this.channelid = this.getQueryVariable("channelid") || ''
  },
  methods: {
    getAddress(e) {
      this.selectAddressShow = false
      let address = e.map(i => {
        return i.name
      })
      this.formData.address = address.join('')
    },
    selectAddress() {
      this.selectAddressShow = !this.selectAddressShow
    },
    
    // 获取背景图
    getBackgroundImgFn() {
      getBackgroundImgApi().then(res => {
        let imgList = res.data.config;
        if (imgList) {
          imgList = JSON.parse(imgList);
          this.configImgObj = imgList;
        } else {
          this.configImgObj = {
            firstimg: this.imgListObj.top,
            qrcode: ""
          };
        }
      });
    },
    // 免费领取
    confirmReceiptFn() {
      if (!this.formData.goodsId) {
        this.$message.info("请选择一款商品");
        return false;
      } else if (!this.formData.name) {
        this.$message.info("名称不可以为空");
        return false;
      } else if (!this.formData.phone) {
        this.$message.info("电话不可以为空");
        return false;
      } else if (!this.formData.address) {
        this.$message.info("地址不可以为空");
        return false;
      } if (!this.formData.address2) {
        this.$message.info("详细地址不可以为空");
        return false;
      }
      if (!this.isTel(this.formData.phone)) {
        this.$message.info("输入的电话号码不正确");
        return false;
      }
      submitgoodsApi({
        nickname: this.formData.name,
        phone: this.formData.phone,
        address: this.formData.address + this.formData.address2,
        goodsid: this.formData.goodsId,
        channelid: this.channelid
      }).then(res => {
        if (res?.data) {
          this.getSetMealListFn();
          this.settlementId = res.data._id;
          this.ordernumber = res.data.ordernumber
          this.isShow = 2;
          window.scrollTo(0, 0);
        }
      });
    },
    // 获取套餐数据
    getSetMealListFn() {
      getSetMealListApi().then(res => {
        this.setMealList = res.result;
      });
    },
    // 支付
    paymentFn(id, name, price) {
      id = this.settlementId
      if (this.isWx()) {
        submitPaymentApi({
          totalPrice: price,
          openid: this.openid,
          ordernumber: this.ordernumber,
          desc: name,
          _id: id
        }).then(res => {
          let parameter = res.result;
          console.log(parameter);
          let that = this;
          // wx.chooseWXPay({
          //   appId: parameter.appId,
          //   timestamp: parameter.timeStamp,
          //   nonceStr: parameter.nonceStr,
          //   package: parameter.package,
          //   signType: parameter.signType,
          //   paySign: parameter.paySign,
          //   success: function(res) {
          //     console.log(res)
          //     this.isShow = 3;
          //     this.settlementId = null;
          //     window.scrollTo(0, 0);
          //   }
          // });
          // let obj = {
          //       appId: parameter.appId, //公众号名称，由商户传入
          //       timeStamp: parameter.timeStamp, //时间戳，自1970年以来的秒数
          //       nonceStr: parameter.nonceStr, //随机串
          //       package: parameter.package,
          //       signType: parameter.signType, //微信签名方式：
          //       paySign: parameter.paySign //微信签名
          //     }
          //     console.log('323', obj)
          function onBridgeReady() {
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              {
                appId: parameter.appId, //公众号名称，由商户传入
                timeStamp: parameter.timeStamp, //时间戳，自1970年以来的秒数
                nonceStr: parameter.nonceStr, //随机串
                package: parameter.package,
                signType: parameter.signType, //微信签名方式：
                paySign: parameter.paySign //微信签名
              },
              function(res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                  paySuccess({ _id: that.settlementId, payprice: price });
                  that.isShow = 3;
                  that.settlementId = null;
                  window.scrollTo(0, 0);
                } else {
                  that.$message.info("支付失败");
                }
              }
            );
          }
          if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
              document.addEventListener(
                "WeixinJSBridgeReady",
                onBridgeReady,
                false
              );
            } else if (document.attachEvent) {
              document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
              document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
            }
          } else {
            onBridgeReady();
          }
        });
      } else {
        payByMWEB({
          totalPrice: price,
          desc: name,
          ordernumber: this.ordernumber,
          _id: id
        }).then(res => {
          console.log(res)
          window.open(res.result.mweb_url)
          this.$alert('请确认是否支付成功', '', {
            confirmButtonText: '确定',
            showClose: false,
            callback: action => {
              this.findOrderById(this.settlementId)
            }
          });
        })
        // this.isShowQRcode = true;
        // new QRCode("QRcodecanvas", {
        //   width: 280,
        //   height: 280,
        //   text: "weixin://wxpay/bizpayurl?pr=74a5mDu",
        //   colorDark: "#000",
        //   colorLight: "#fff"
        // });
      }
    },
    // 是否手机端
    isPhone() {
      var sUserAgent = navigator.userAgent.toLowerCase();
      var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
      var bIsMidp = sUserAgent.match(/midp/i) == "midp";
      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
      var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
      var bIsAndroid = sUserAgent.match(/android/i) == "android";
      var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
      var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
      if (
        bIsIpad ||
        bIsIphoneOs ||
        bIsMidp ||
        bIsUc7 ||
        bIsUc ||
        bIsAndroid ||
        bIsCE ||
        bIsWM
      ) {
        return true; //是手机
      } else {
        return false; //是pc
      }
    },
    // 是否微信
    isWx() {
      let ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    },
    findOrderById(id) {
      findOrderById({_id: id}).then(res => {
        if (res.result.status == 2) {
          this.isShow = 3;
          this.settlementId = null;
          window.scrollTo(0, 0);
        } else {
          this.$message.info("支付失败，请重试");
        }
      })
    },
    // 获取域名
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    },
    getShareConfig() {
      getShareConfig({url: location.href}).then(res => {
          //需在用户可能点击分享按钮前就先调用
          wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: res.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.signature,// 必填，签名，见附录1
              jsApiList: res.data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          setTimeout(() => {
            this.setShare()
          }, 1300);
      })
    },
    setShare() {
      wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({ 
          title: share.title, // 分享标题
          desc: share.desc, // 分享描述
          link: share.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: share.imgUrl, // 分享图标
          success: function () {
            // 设置成功
          }
        })
        wx.updateTimelineShareData({ 
          title: share.title, // 分享标题
          link: share.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: share.imgUrl, // 分享图标
          success: function () {
            // 设置成功
          }
        })
      });
    },
    // 转发
    forwardFn() {
      if (this.isWx()) {
        this.showMask = true
      } else {
        try {
            nativeShare.call('wechatFriend')
        } catch (err) {
            // 如果不支持，你可以在这里做降级处理
            alert('自动分享失败，请手动分享链接给好友')
        }
      }
    },
    // 判断是否为电话号码
    isTel(s) {
      var reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if (!reg.test(s)) return false;
      return true;
    }
  }
};
</script>

<style scoped lang="less">
.mask{
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7) url('../assets/images/goshare.png')no-repeat top center / contain;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000000;
}
.main_box {
  width: 100%;
  height: auto;
  background-color: #fdcf1b;
  padding: 50px 0 20px;
  .topBackgroundImgBox {
    width: 100%;
    & > img {
      width: 100%;
    }
  }
  .getItNowFromBox {
    width: 100%;
    // margin-top: -50px;
    position: relative;
    & > img {
      width: 100%;
    }
    .getItNowFromMain {
      position: absolute;
      left: 0;
      top: 0;
      padding: 12%;
      width: 100%;
      .getItNowFromMain_imgBox {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: center;
        .getItNowFromMain_imgItem {
          width: 33%;
          height: 100%;
          &:nth-child(2) {
            margin-left: -10px;
          }
          &:nth-child(3) {
            margin-left: -10px;
          }
          &:nth-child(4) {
            margin-left: -10px;
          }
          & > img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .getItNowFromMain_radioBox {
        width: 100%;
        /deep/ .el-radio-group {
          display: flex;
          justify-content: space-evenly;
          width: 100%;
          height: 50px;
          align-items: center;
          .el-radio__input.is-checked .el-radio__inner {
            border-color: #606266;
            background: #606266;
          }
          .el-radio__input.is-checked + .el-radio__label {
            color: #606266;
          }
        }
        .inputRadio {
          width: 16px;
          height: 16px;
          vertical-align: middle;
          margin-right: 5px;
        }
      }
      .getItNowFromMain_textBox {
        line-height: 50px;
        .getItNowFromMain_label {
          color: #000;
          font-size: 16px;
          display: inline-block;
          width: 20%;
          font-weight: bold;
          text-align: center;
        }
        .getItNowFromMain_Input {
          border: 1px solid #000;
          height: 40px;
          padding: 0 10px;
          border-radius: 4px;
          width: 80%;
          background: #fff;
        }
      }
      .getItNowFromMain_btnBox {
        line-height: 50px;
        .getItNowFromMain_btn {
          height: 50px;
          width: 60%;
          margin: 20px auto;
          // background: #ffc522;
          background-image: linear-gradient(#ffd824, #fd8b1b);
          border-radius: 50px;
          text-align: center;
          line-height: 46px;
          font-size: 18px;
          font-weight: bold;
          color: #fff;
          border: 2px solid #feb11f;
        }
      }
    }
  }
}
.introduceBox {
  width: 100%;
  height: auto;
  background-color: #fdcf1b;
  .setMealBox {
    width: 100%;
    padding: 20px 0 0;
    & > img {
      width: 100%;
    }
    .setmealMain {
      background-color: #fff;
      padding: 20px 20px 0;
      .setmealTableBox {
        border-radius: 10px;
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
        .setmealTableBox_title {
          line-height: 40px;
          font-size: 22px;
          text-align: center;
          color: #fff;
          background-color: #a5a5a5;
          border-bottom: 2px solid #fff;
        }
        .setmealTableBox_li {
          line-height: 36px;
          border-bottom: 2px solid #fff;
          .setmealTableBox_left {
            display: inline-block;
            vertical-align: top;
            text-align: center;
            background-color: #d7d7d7;
            box-sizing: border-box;
            border-right: 2px solid #fff;
            width: 70%;
            font-size: 16px;
            color: #fff;
          }
          .setmealTableBox_right {
            display: inline-block;
            vertical-align: top;
            text-align: center;
            width: 30%;
            font-size: 16px;
            background-color: #d7d7d7;
            color: #fff;
          }
        }
      }
      .getThePackageBox {
        border-radius: 10px;
        width: 100%;
        overflow: hidden;
        background-color: #f9dec1;
        .getThePackageBox_title {
          font-size: 24px;
          text-align: center;
          line-height: 60px;
          color: #ff5448;
        }
        .getThePackageBox_content {
          padding: 10px;
          .getThePackageBox_item {
            overflow: hidden;
            margin-bottom: 15px;
            position: relative;
            & > img {
              width: 100%;
              height: 140px;
            }
            .getThePackageBox_itemBox {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              .getThePackageBox_itemTitle {
                padding: 10px 15px;
                color: #000;
                font-size: 16px;
              }
              .getThePackageBox_itemContent {
                padding: 0 15px;
                display: flex;
                .getThePackageBox_itemContent_left {
                  width: 60%;
                  padding: 10px 0;
                  .getThePackageBox_itemContent_details {
                    font-size: 18px;
                    color: #f2a653;
                    font-weight: bold;
                    line-height: 40px;
                  }
                  .getThePackageBox_itemContent_priceBox {
                    line-height: 30px;
                    font-size: 14px;

                    .getThePackageBox_itemContent_price_month {
                      color: #5b5b5b;
                      .getThePackageBox_itemContent_price {
                        color: #f4711f;
                      }
                    }
                    .getThePackageBox_itemContent_price_total {
                      font-size: 18px;
                      font-weight: bold;
                      color: #f4711f;
                      margin-left: 14px;
                    }
                  }
                }
                .getThePackageBox_itemContent_BtnBox {
                  display: flex;
                  justify-items: center;
                  align-items: center;
                  width: 40%;
                  .getThePackageBox_itemContent_Btn {
                    background-color: #f4711f;
                    font-size: 16px;
                    color: #fff;
                    font-weight: bold;
                    padding: 5px 10px;
                    border-radius: 4px;
                    margin: 0 auto;
                  }
                }
              }
            }
          }
        }
      }
      .setmealRemarks {
        color: #ff473a;
        font-size: 16px;
        text-align: center;
        line-height: 50px;
      }
    }
  }
  .introduceBox_title {
    line-height: 80px;
    & > img {
      width: 100%;
    }
  }
  .introduceBox_content {
    & > img {
      width: 100%;
    }
  }
  .QRcodeBox {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    .QRcodeMain {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 300px;
      height: 360px;
      background-color: #fff;
      padding: 10px;
      #QRcodecanvas {
        width: 280px;
        height: 280px;
      }
      .QRcodeTitle {
        text-align: center;
        line-height: 40px;
        font-size: 30px;
      }
    }
  }
}
.successPage {
  width: 100%;
  height: auto;
  background-color: #fdcf1b;
  padding-bottom: 20px;
  position: relative;
  .successPage_forwardBtn {
    position: absolute;
    width: 34%;
    height: 6%;
    left: 33%;
    top: 45%;
    cursor: pointer;
  }
  .successPage_qucodeBox {
    position: absolute;
    left: 33%;
    top: 54.3%;
    width: 33%;
    height: 16.5%;
    & > img {
      width: 100%;
      height: 100%;
    }
  }
  & > img {
    width: 100%;
  }
}
</style>


<style lang="less">
  .el-message-box__wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      .el-message-box{
        width: 300px;
      }
  }
</style>